<style lang="less">
  @import './orgManager.less';
</style>
<template>
  <div>

    <Row>
      <Col span="24">
      <Card>
        <p slot="title">
          <Icon type="ios-list"></Icon>
          组织列表
        </p>
        <Row>
          <Input v-model="searchModel.organizationName" placeholder="组织名称..." style="width: 300px"/>
          <Button type="primary" shape="circle" @click="searchOrg" :loading="searchLoading" icon="ios-search">
            <span>搜索组织</span>
          </Button>
        </Row>
        <Row>
          <Button type="primary" icon="earth" style="margin-top:10px;"
                  v-hasPermissionButton="'/admin/organization/addOrganizationButton'" @click="openAddOrg">
            <span>添加组织</span>
          </Button>
        </Row>
        <Row type="flex" justify="center" align="middle">
          <Table border :columns="columnHeader" :data="orgList"></Table>
        </Row>
        <Row type="flex" justify="center" align="middle">
          <Page :total="total" :current="current" :page-size="pageSize" :show-tota="showTotal" @on-change="onChange"
                show-elevator></Page>
        </Row>
      </Card>
      </Col>
    </Row>


    <Modal v-model="showSaveAndEdit" :title="saveAndEditTitle" :mask-closable="false"
           @on-ok="saveOrEditOrgInfo">
      <Form :model="orgInfo" label-position="left" :label-width="100">
        <FormItem label="组织名称">
          <Input v-model="orgInfo.organizationName"/>
        </FormItem>
        <FormItem label="组织类型">
          <RadioGroup v-model="orgInfo.organizationType">
            <Radio label="1">机构</Radio>
            <Radio label="2">部门</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="父组织">
          <Select v-model="orgInfo.organizationParentId" filterable>
            <Option v-for="organization in organizationList" :value="organization.organizationId"
                    :key="organization.organizationId">{{
              organization.organizationName }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="orgInfo.organizationRemark" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                 placeholder="Enter something..."></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        searchModel: {
          pageSize: 10,
          pageNum: null,
          organizationName: ''
        },
        orgInfo: {
          organizationId: null,
          organizationName: '',
          organizationParentId: null,
          organizationRemark: ''
        },
        total: null,
        current: null,
        pageSize: null,
        showTotal: true,
        organizationList: [],
        saveAndEditTitle: '',
        showSaveAndEdit: false,
        searchLoading: false,
        columnHeader: [
          {
            title: '组织名称',
            key: 'organizationName',
            width: 200,
            fixed: 'left'
          }, {
            title: '组织展示名称',
            key: 'showOrganizationName',
            width: 200,
            fixed: 'left'
          }, {
            title: '创建时间',
            key: 'createDate',
            width: 200,
            fixed: 'left'
          }, {
            title: '修改时间',
            key: 'modifyDate',
            width: 200,
            fixed: 'left'
          }, {
            title: '组织备注',
            key: 'organizationRemark',
            width: 200,
            fixed: 'left'
          },
          {
            title: '操作',
            key: 'organizationId',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.openEditOrg(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/organization/editOrganizationButton'
                    }
                  ]
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeOrg(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/organization/deleteOrganizationButton'
                    }
                  ]
                }, '删除')
              ]);
            }
          }
        ],
        orgList: []
      }
    },
    methods: {
      searchOrg() {
        let that = this;
        that.orgList = [];
        this.$http.post('/api/admin/organization/page', null, {
          params: that.searchModel
        })
          .then(function (res) {
            if (res.status !== '200') {
              return;
            }
            let orgList = res.data.list;
            orgList.forEach(item => {
              that.orgList.push(item);
            });
            that.total = res.data.total;
            that.current = res.data.pageNum;
            that.pageSize = res.data.pageSize;

          })
          .catch(err => {
            console.log(err)
          });
      },
      openAddOrg() {
        this.initOrgList();
        this.orgInfo = {};
        this.showSaveAndEdit = true;
        this.saveAndEditTitle = '添加组织';
      },
      saveOrEditOrgInfo() {
        let that = this;
        let url = '';
        if (this.orgInfo.organizationId) {
          url = '/api/admin/organization/update';
        } else {
          url = '/api/admin/organization/add';
        }
        this.$http.post(url, this.orgInfo).then(res => {
          that.getOrgList();
        }).catch(err => {

        });
      },
      onChange(pageNum) {
        this.searchModel.pageNum = pageNum;
        this.getOrgList();
      },
      initOrgList() {
        let that = this;
        that.organizationList = [];
        this.$http.post('/api/admin/organization/all', {}).then(res => {
          let initOrgList = res.data;
          initOrgList.forEach(item => {
            that.organizationList.push(item);
          });

        }).catch(err => {

        });
      },
      getOrgList() {
        let that = this;
        that.orgList = [];
        that.searchModel.pageNum = 1;
        this.$http.post('/api/admin/organization/page', that.searchModel)
          .then(function (res) {
            if (res.status !== '200') {
              return;
            }
            let orgList = res.data.list;
            orgList.forEach(item => {
              that.orgList.push(item);
            });
            that.total = res.data.total;
            that.current = res.data.pageNum;
            that.pageSize = res.data.pageSize;

          })
          .catch(err => {
            console.log(err)
          });
      },
      openEditOrg(row) {
        this.initOrgList();
        this.showSaveAndEdit = true;
        this.saveAndEditTitle = '修改组织';
        this.orgInfo = {
          organizationId: row.organizationId,
          organizationName: row.organizationName,
          organizationParentId: row.organizationParentId,
          organizationRemark: row.organizationRemark,
          organizationType: row.organizationType + ""
        }
      },
      removeOrg(row) {


        let that = this;
        that.organizationList = [];
        this.$http.post('/api/admin/organization/remove', null, {
          params: {
            id: row.organizationId
          }
        }).then(res => {
          that.getOrgList();


        }).catch(err => {

        });


      }
    },
    mounted() {
      this.getOrgList();
    },
    created() {

    },
  }
</script>
